<template>
  <view v-if="!showAddChildPop" class="genealogy-container">
    <!-- 获取申请理由 -->
    <view class="process">
      <view>申请理由:</view>
      <view class="reason_tit">我是申请理由</view>
    </view>
    <!-- 用户申请区域 -->
    <view class="processArea">
      <!-- 加载中状态 -->
      <view v-if="loading" class="loading">
        <wd-loading color="#3c9cff" size="36px" />
        <text class="loading-text">加载家谱数据中...</text>
      </view>
      <!-- 家谱树SVG视图 -->
      <scroll-view
        v-else-if="treeData"
        :scroll-x="true"
        :scroll-y="true"
        class="tree-scroll-container"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      >
        <view class="tree-canvas" :style="{ transform: `scale(${scale})` }">
          <!-- 递归渲染家谱树 -->
          <genealogy-generation
            :person="treeData"
            :generation="1"
            :level="0"
            :index="0"
            :parent-x="150"
            :parent-y="0"
            @node-click="handleNodeClick"
            @add-child="handleAddChild"
            @edit-info="handleEditInfo"
            @add-spouse="handleAddSpouse"
            @add-parent="handleAddParent"
          />
        </view>
      </scroll-view>
      <view v-else class="empty-data">
        <wd-icon name="info-fill" size="64px" color="#ddd" />
        <text class="empty-text">暂无家谱数据</text>
      </view>
      <!-- 缩放控制器 -->
      <view v-if="!personDetail" class="zoom-controls">
        <view class="zoom-btn" @click="zoomIn">
          <wd-icon name="add" size="14px" />
        </view>
        <view class="zoom-btn" @click="zoomOut">
          <wd-icon name="remove" size="14px" />
        </view>
        <view class="zoom-btn" @click="resetZoom">
          <wd-icon name="refresh" size="14px" />
        </view>
      </view>
    </view>
    <!-- 搜索关联人员 -->
    <view v-show="!showTree" class="classociation">
      <view class="search_box">
        <wd-search
          v-model="lastName"
          hide-cancel
          class="search_input"
          placeholder="请输入姓名/ID搜索人员"
          maxlength="10"
          @change="onSearch"
        />
      </view>
      <!-- 未找到人员提示 -->
      <view v-if="personList.length === 0" class="no-result">
        <wd-icon name="search" size="24px" color="#999"></wd-icon>
        <text class="no-result-text">暂未找到人员，请重新搜索</text>
      </view>
      <!-- 家谱列表 -->
      <view class="family_list">
        <wd-card v-for="item in personList" v-show="showCheck" :key="item.id" type="rectangle">
          <view style="height: 40px" class="content">
            <view>
              <view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">
                {{ item.firstName + item.lastName }}
              </view>
              <view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">{{ item.createTime }}</view>
            </view>
            <view>
              <wd-button size="small" plain @click="onSelectPerson(item)">选择</wd-button>
              <wd-button size="small" plain @click="onSearchTree(item.id)">查看家谱</wd-button>
            </view>
          </view>
        </wd-card>
        <!-- 家谱人员选中提示 -->
        <view v-show="hideSelectTip" class="family_list_tip">
          <view>
            <wd-icon name="check-outline" size="16px"></wd-icon>
            <text class="empty-text">已选择关联人员: {{ selectedPersonName }}</text>
          </view>
          <view v-if="!selectedPersonName">家谱人员选中提示</view>
        </view>
      </view>
    </view>
    <!-- 查看关联人员树状图 -->
    <view v-if="showTree" class="association_tree">
      <view class="tree_title">
        <view class="title_left">
          <wd-button size="small" @click="showTree = false">隐藏搜索</wd-button>
        </view>
        <view v-if="targetPersonId" class="title_right">
          <wd-button type="primary" size="small" class="locate-btn" @click="locateTargetPerson">
            <wd-icon name="location" size="14px" />
            定位目标节点
          </wd-button>
        </view>
      </view>
      <!-- 加载中状态 -->
      <view v-if="loading" class="loading">
        <wd-loading color="#3c9cff" size="36px" />
        <text class="loading-text">加载家谱数据中...</text>
      </view>
      <!-- 家谱树SVG视图 -->
      <scroll-view
        v-else-if="associateTree"
        :scroll-x="true"
        :scroll-y="true"
        class="tree-scroll-container"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      >
        <view class="tree-canvas" :style="{ transform: `scale(${scale})` }">
          <!-- 递归渲染家谱树 -->
          <genealogy-generation-tree-concat
            :person="associateTree"
            :generation="1"
            :level="0"
            :index="0"
            :parent-x="150"
            :parent-y="0"
            :target-person-id="targetPersonId"
            @node-click="handleNodeClick"
          />
        </view>
      </scroll-view>
      <!-- 缩放控制器 -->
      <view v-if="!personDetail" class="zoom-controls1">
        <view class="zoom-btn" @click="zoomIn">
          <wd-icon name="add" size="14px" />
        </view>
        <view class="zoom-btn" @click="zoomOut">
          <wd-icon name="remove" size="14px" />
        </view>
        <view class="zoom-btn" @click="resetZoom">
          <wd-icon name="refresh" size="14px" />
        </view>
      </view>
      <view v-else class="empty-data">
        <wd-icon name="info-fill" size="64px" color="#ddd" />
        <text class="empty-text">暂无家谱数据</text>
      </view>
    </view>
    <view class="operation_container">
      <!-- 审核理由 -->
      <view class="audit_reason">
        <view class="audit_label">
          <span class="required">*</span>
          审核理由:
        </view>
        <view class="audit_content">
          <wd-textarea
            v-model="reasonVal"
            auto-height
            placeholder="请输入审核理由"
            :maxlength="200"
            show-word-limit
            class="reason_textarea"
          />
        </view>
      </view>
      <!-- 类型选择 -->
      <view class="audit_reason">
        <view class="audit_label">
          <span class="required">*</span>
          类型选择:
        </view>
        <view class="audit_content">
          <wd-radio-group
            v-model="consume"
            shape="button"
            size="large"
            inline
            class="type_radio_group"
          >
            <wd-radio value="1" class="type_radio">消耗自己的指标</wd-radio>
            <wd-radio value="2" class="type_radio">用户自己购买指标</wd-radio>
          </wd-radio-group>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view class="operation_btn">
        <view class="operation_btn_title">确认是否同意用户加入族谱</view>
        <view class="operation_btn_group">
          <wd-button class="pass_btn" @click="onPass">通过</wd-button>
          <wd-button type="error" class="reject_btn" @click="onReject">拒绝</wd-button>
        </view>
      </view>
    </view>
  </view>
  <!-- 添加子辈弹窗 -->
  <add-child-pop
    v-else
    :visible="showAddChildPop"
    :operationType="currentOperationType"
    :editData="currentEditData"
    :familyOptions="familyOptions"
    :zibeiOptions="zibeiOptions"
    :genderOptions="genderOptions"
    :aliveOptions="aliveOptions"
    @close="handleAddChildClose"
    @submit="handleAddChildSubmit"
  />
</template>

<script>
import PersonAPI from "@/api/genealogy/person";
import FamilyUserAPI from "@/api/genealogy/family-user";
import GenealogyGeneration from "@/pages/mine/process/components/tree.vue"; // 引入 tree.vue 组件
import GenealogyGenerationTreeConcat from "@/pages/mine/process/components/treeConcat.vue"; // 引入 tree.vue 组件
import AddChildPop from "@/pages/mine/process/components/addChildPop.vue"; // 引入 addChildPop 组件
export default {
  components: {
    GenealogyGeneration, // 注册组件
    GenealogyGenerationTreeConcat,
    AddChildPop,
  },
  data() {
    return {
      loading: true,
      treeData: null,
      scale: 0.8,
      personDetailDialog: {
        visible: false,
      },
      personDetail: null,
      personList: [],
      // 搜索家谱列表参数
      familyId: "",
      lastName: "",
      // 查看关联人员树状图
      showTree: false,
      // 获取关联家谱人员列表
      associateTree: [],
      selectedPersonName: "", // 新增：用于存储选中的关联人员姓名
      hideSelectTip: false, // 隐藏选中提示
      showCheck: false, // 显示选中提示
      reasonVal: "", // 审核理由
      consume: "1", // 类型选择
      selectedPerson: null, // 新增：用于存储选中的关联人员
      // addChildPop相关数据
      showAddChildPop: false, // 控制addChildPop显示
      currentParentPerson: null, // 当前选中的父辈人员
      currentOperationType: "add-child", // 当前操作类型
      currentEditData: null, // 当前编辑数据
      // 选项数据
      familyOptions: [
        { label: "河间李氏", value: "1" },
        { label: "其他家族", value: "2" },
      ],
      zibeiOptions: [
        { label: "字辈A", value: "A" },
        { label: "字辈B", value: "B" },
      ],
      genderOptions: [
        { label: "男", value: 1 },
        { label: "女", value: 0 },
      ],
      aliveOptions: [
        { label: "在世", value: 1 },
        { label: "已故", value: 0 },
      ],
      targetPersonId: null, // 新增：用于保存目标节点ID
    };
  },
  mounted() {
    const pages = this.$route.query; // 获取当前页面栈
    const personId = pages.personId; // 从页面选项中获取 personId
    this.familyId = pages.familyId; // 从页面选项中获取 familyId
    this.personId = personId;
    this.loadTreeData(personId); // 将 personId 传递给 loadTreeData 方法
  },
  methods: {
    async loadTreeData(personId) {
      this.loading = true;
      try {
        const data = await FamilyUserAPI.getApplyInfo(personId);
        if (Array.isArray(data) && data.length > 0) {
          this.treeData = data.data[0];
        } else {
          this.treeData = data.familyData;
        }
        console.log(JSON.stringify(this.treeData) + "我是data数据");
      } catch (error) {
        console.error("加载家谱数据失败:", error);
        uni.showToast({
          title: "加载家谱失败",
          icon: "none",
        });
      } finally {
        this.loading = false;
      }
    },
    handleNodeClick(person) {
      if (!person || !person.id) return;
      console.log("点击了家族成员:", person);
      this.personDetail = null;
      this.personDetailDialog.visible = true;
      this.getPersonDetail(person.id);
    },
    async getPersonDetail(personId) {
      try {
        const data = await PersonAPI.getFormData({ personId });
        this.personDetail = data;
      } catch (error) {
        console.error("获取成员详情失败:", error);
        uni.showToast({
          title: "获取成员详情失败",
          icon: "none",
        });
        this.personDetailDialog.visible = false;
      }
    },
    zoomIn() {
      if (this.scale < 2) {
        this.scale += 0.1;
      }
    },
    zoomOut() {
      if (this.scale > 0.1) {
        this.scale -= 0.1;
      }
    },
    resetZoom() {
      this.scale = 1;
    },
    onSearch() {
      // 如果 lastName 为空，则不搜索（可添加提示）
      if (!this.lastName || this.lastName.trim() === "") {
        return; // 直接返回，不执行后续逻辑
      }
      PersonAPI.getPage({
        pageNum: 1,
        pageSize: 10,
        lastName: this.lastName,
        familyId: this.familyId,
      }).then((res) => {
        this.personList = JSON.parse(JSON.stringify(res.list));
        if (this.personList.length > 0) {
          this.showCheck = true;
        }
      });
    },
    // 选择关联人员
    onSelectPerson(person) {
      this.hideSelectTip = true;
      this.showCheck = false;
      this.selectedPersonName = person.firstName + person.lastName; // 更新选中的关联人员姓名
      this.selectedPerson = person;
    },
    // 查看选择人员家谱
    onSearchTree(personId) {
      this.showTree = true;
      // 保存目标节点ID，用于定位
      this.targetPersonId = personId;
      PersonAPI.getTree({
        personId: personId,
      }).then((res) => {
        const data = JSON.stringify(res);
        this.associateTree = JSON.parse(data)[0];
        console.log(JSON.stringify(this.associateTree) + "我是关联人员家谱数据");
      });
    },
    // 通过家谱审核
    onPass() {
      const paramsData = {
        status: 1,
        reason: this.reasonVal,
        auditType: this.consume, // 是否消耗自己的指标
        familyData: this.treeData, // 添加家谱树数据
      };
      // 人员搜索关联方式
      if (this.selectedPerson) {
        paramsData["connectionInfo"] = {
          personId: this.selectedPerson.id,
          familyId: this.selectedPerson.familyId,
        };
      }

      FamilyUserAPI.update(this.personId, paramsData).then((res) => {
        uni.showToast({
          title: "添加成功",
          icon: "success",
        });
        setTimeout(() => {
          // 跳转页面
          uni.navigateTo({
            url: "/pages/mine/process/index",
          });
        }, 1000);
      });
    },
    // 拒绝家谱审核
    onReject() {},
    // 处理添加子辈事件
    handleAddChild(person) {
      console.log("handleAddChild被调用", person);
      this.currentParentPerson = person;
      this.currentOperationType = "add-child";
      this.currentEditData = null;
      this.showAddChildPop = true;
    },
    // 处理编辑信息事件
    handleEditInfo(person) {
      console.log("handleEditInfo被调用", person);
      this.currentParentPerson = person;
      this.currentOperationType = "edit-info";

      // 确保编辑数据包含所有必要字段
      this.currentEditData = {
        familyId: person.familyId || "",
        firstName: person.firstName || "",
        lastName: person.lastName || "",
        remark: person.remark || person.nickname || "",
        nickname: person.nickname || person.remark || "",
        genation: person.genation || "",
        gender: person.gender || 1,
        alive: person.alive || 1,
        photoUrl: person.photoUrl || "",
        occupation: person.occupation || "",
        birthPlace: person.birthPlace || "",
        address: person.address || "",
        longitude: person.longitude || "",
        latitude: person.latitude || "",
        birthDate: person.birthDate || "",
        deathDate: person.deathDate || "",
        biography: person.biography || person.remark || "",
      };

      console.log("handleEditInfo 编辑数据:", this.currentEditData);
      this.showAddChildPop = true;
    },
    // 处理添加配偶事件
    handleAddSpouse(person) {
      console.log("handleAddSpouse被调用", person);
      this.currentParentPerson = person;
      this.currentOperationType = "add-spouse";
      this.currentEditData = null;
      this.showAddChildPop = true;
    },
    // 处理添加父亲节点事件
    handleAddParent(person) {
      console.log("handleAddParent被调用", person);
      this.currentParentPerson = person;
      this.currentOperationType = "add-parent";
      this.currentEditData = null;
      this.showAddChildPop = true;
    },
    // 处理addChildPop提交
    handleAddChildSubmit(formData) {
      console.log("handleAddChildSubmit被调用", formData, this.currentOperationType);

      if (this.currentOperationType === "edit-info") {
        // 编辑信息
        this.handleEditSubmit(formData);
      } else if (this.currentOperationType === "add-spouse") {
        // 添加配偶
        this.handleAddSpouseSubmit(formData);
      } else if (this.currentOperationType === "add-parent") {
        // 添加父亲节点
        this.handleAddParentSubmit(formData);
      } else {
        // 添加子辈（默认）
        this.handleAddChildSubmitInternal(formData);
      }
    },
    // 处理编辑提交
    handleEditSubmit(formData) {
      console.log("handleEditSubmit被调用", formData, this.currentParentPerson);

      // 更新当前人员的信息
      Object.assign(this.currentParentPerson, {
        familyId: formData.familyId || this.currentParentPerson.familyId,
        firstName: formData.firstName || "",
        lastName: formData.lastName || "",
        photoUrl: formData.photoUrl || "",
        gender: formData.gender || 1,
        alive: formData.alive || 1,
        remark: formData.nickname || "",
        nickname: formData.nickname || "",
        genation: formData.genation || "",
        occupation: formData.occupation || "",
        birthPlace: formData.birthPlace || "",
        address: formData.address || "",
        longitude: formData.longitude || "",
        latitude: formData.latitude || "",
        birthDate: formData.birthDate || "",
        deathDate: formData.deathDate || "",
        biography: formData.biography || "",
      });

      console.log("handleEditSubmit 更新后的人员数据:", this.currentParentPerson);

      this.closeModal();
      uni.showToast({
        title: "编辑成功",
        icon: "success",
      });
    },
    // 处理添加配偶提交
    handleAddSpouseSubmit(formData) {
      // 创建新的配偶对象
      const newSpouse = {
        id: Date.now().toString(),
        firstName: formData.firstName || "",
        lastName: formData.lastName || "",
        photoUrl: formData.photoUrl || "",
        gender: formData.gender || 0, // 配偶性别通常与主节点相反
        alive: formData.alive || 1,
        remark: formData.nickname || "",
        parentId: this.currentParentPerson?.id,
        children: [],
        spouseList: [],
      };

      // 添加到当前人员的配偶列表中
      if (!this.currentParentPerson.spouseList) {
        this.currentParentPerson.spouseList = [];
      }
      this.currentParentPerson.spouseList.push(newSpouse);

      this.closeModal();
      uni.showToast({
        title: "添加配偶成功",
        icon: "success",
      });
    },
    // 处理添加父亲节点提交
    handleAddParentSubmit(formData) {
      // 创建新的父亲节点
      const newParent = {
        id: Date.now().toString(),
        firstName: formData.firstName || "",
        lastName: formData.lastName || "",
        photoUrl: formData.photoUrl || "",
        gender: formData.gender || 1,
        alive: formData.alive || 1,
        remark: formData.nickname || "",
        children: [this.currentParentPerson], // 将当前人员作为子节点
        spouseList: [],
      };

      // 这里需要更新整个家谱树结构
      // 由于结构复杂，这里只是示例
      console.log("添加父亲节点:", newParent);

      this.closeModal();
      uni.showToast({
        title: "添加父亲节点成功",
        icon: "success",
      });
    },
    // 处理添加子辈提交（内部方法）
    handleAddChildSubmitInternal(formData) {
      // 创建新的子辈对象
      const newChild = {
        id: Date.now().toString(), // 临时ID，实际应该从后端获取
        firstName: formData.firstName || "",
        lastName: formData.lastName || "",
        photoUrl: formData.photoUrl || "",
        gender: formData.gender || 1,
        alive: formData.alive || 1,
        remark: formData.nickname || "",
        parentId: this.currentParentPerson?.id,
        children: [],
        spouseList: [],
      };

      // 添加到当前父节点的children中
      if (!this.currentParentPerson.children) {
        this.currentParentPerson.children = [];
      }
      this.currentParentPerson.children.push(newChild);

      this.closeModal();
      uni.showToast({
        title: "添加子辈成功",
        icon: "success",
      });
    },
    // 关闭弹窗的通用方法
    closeModal() {
      this.showAddChildPop = false;
      this.currentParentPerson = null;
      this.currentOperationType = "add-child";
      this.currentEditData = null;
    },
    // 关闭addChildPop
    handleAddChildClose() {
      this.closeModal();
    },
    // 定位到目标人员
    locateTargetPerson() {
      if (this.targetPersonId) {
        console.log("定位到目标节点:", this.targetPersonId);

        // 显示定位提示
        uni.showToast({
          title: "正在定位目标节点...",
          icon: "loading",
          duration: 2000,
        });

        // 延迟执行，确保DOM已渲染
        setTimeout(() => {
          // 查找目标节点元素
          const targetElement = document.querySelector(`[data-person-id="${this.targetPersonId}"]`);
          if (targetElement) {
            // 滚动到目标节点
            targetElement.scrollIntoView({
              behavior: "smooth",
              block: "center",
              inline: "center",
            });

            // 添加高亮效果
            targetElement.classList.add("target-highlight");

            // 3秒后移除高亮
            setTimeout(() => {
              targetElement.classList.remove("target-highlight");
            }, 3000);

            uni.showToast({
              title: "已定位到目标节点",
              icon: "success",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "未找到目标节点",
              icon: "none",
              duration: 2000,
            });
          }
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: #999;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.no-result-text {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.process {
  padding: 20px;

  .reason_tit {
    color: #666;
    font-size: 12px;
  }
}

.processArea {
  background-color: #f5f7fa;
  padding: 10px;
  height: 300px;
  position: relative;
  .zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}

.genealogy-container {
  background-color: #ffffff;
}

.search_tree {
  background: #f5f7fa;
  display: none;
  height: 300px;
}

/* 树形结构样式 */
.tree-scroll-container {
  flex: 1;
  width: 100%;
  height: 300px;
}

.tree-canvas {
  position: relative;
  width: 5000rpx;
  /* 增加宽度以容纳配偶空间 */
  height: 8000rpx;
  /* 增加高度以容纳更多代 */
  transform-origin: 0 0;
  transition: transform 0.3s ease;
}

/* 缩放控制器 */
.zoom-controls {
  position: fixed;
  bottom: 120rpx;
  right: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  z-index: 100;
}

.zoom-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid #f0f0f0;
}

.loading,
.empty-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #999;
}

.loading-text,
.empty-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

/* 弹窗样式 */
.popup-footer {
  padding: 20rpx;
}

.popup-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.popup-loading text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.person-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
}

.person-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  margin-bottom: 20rpx;
}

.person-avatar image {
  width: 100%;
  height: 100%;
}

.person-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.biography {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  white-space: pre-wrap;
}

// 家谱树样式
.content,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.content {
  justify-content: space-between;
}

.title {
  justify-content: space-between;
}

.title-tip {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}

.search_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search_input {
  flex: 1;
}

.search_btn {
  padding-right: 14px;
}

// 查看关联人员树状图
.association_tree {
  background: #f5f7fa;
  position: relative;
  .zoom-controls1 {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}

.tree_title {
  background-color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between; /* Changed to space-between */
  align-items: center;
}

.title_left {
  flex: 1; /* Allow left button to take available space */
}

.title_right {
  flex: 0; /* Prevent right button from growing */
}

.locate-btn {
  background-color: #4d80f0; /* Changed background color */
  color: #fff; /* Changed text color */
  border: none; /* Removed border */
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3); /* Changed shadow */
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
  }
}

// 选中家族提示
.family_list_tip {
  background: #e9f9ec;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  color: #23c343;
  font-size: 14px;

  .empty-text {
    font-size: 14px;
    color: #23c343;
    margin: 0 10px;
  }
}
.family_list {
  max-height: 700rpx;
  overflow-y: scroll;
  border-bottom: 1px solid #f0f0f0;
}
.family_list_tip wd-icon {
  margin-right: 10px;
}

.audit_reason {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  .audit_label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .required {
      color: #ff4d4f;
      margin-right: 4px;
      font-weight: bold;
    }
  }

  .audit_content {
    .reason_textarea {
      width: 92%;
      min-height: 80px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      padding: 12px;
      font-size: 14px;
      line-height: 1.5;
      transition: all 0.3s ease;

      &:focus {
        border-color: #3c9cff;
        background-color: #fff;
        box-shadow: 0 0 0 2px rgba(60, 156, 255, 0.1);
      }
    }

    .type_radio_group {
      display: flex;
      gap: 16px;

      .type_radio {
        flex: 1;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #d9d9d9;
        background-color: #fafafa;
        transition: all 0.3s ease;

        &:hover {
          border-color: #3c9cff;
          background-color: #f0f8ff;
        }

        &.wd-radio--checked {
          border-color: #3c9cff;
          background-color: #e6f7ff;
          color: #3c9cff;
        }
      }
    }
  }
}

.operation_btn {
  padding: 20px;

  .operation_btn_title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
    text-align: center;
  }

  .operation_btn_group {
    display: flex;
    gap: 16px;
    justify-content: center;

    .pass_btn {
      flex: 1;
      height: 44px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      background: #4d80f0;
      border: none;
      box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
      }
    }

    .reject_btn {
      flex: 1;
      height: 44px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
      border: none;
      box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
      }
    }
  }
}
.audit_reason :deep(.wd-radio__label) {
  background: transparent !important;
  border: none !important;
}
.audit_reason :deep(.wd-radio) {
  border: 1px solid #f3f3f3 !important;
  margin-right: 0 !important;
  background-color: #fff !important;
}
.audit_reason :deep(.is-checked) {
  background-color: #4d80f0 !important;
  color: #fff !important;
}
.audit_reason :deep(.is-checked) .wd-radio__label {
  color: #fff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .operation_container {
    margin: 8px;

    .audit_reason {
      padding: 16px;

      .audit_content {
        .type_radio_group {
          flex-direction: column;
          gap: 12px;

          .type_radio {
            height: 36px;
            font-size: 13px;
          }
        }
      }
    }

    .operation_btn {
      padding: 16px;

      .operation_btn_group {
        flex-direction: column;
        gap: 12px;

        .pass_btn,
        .reject_btn {
          height: 40px;
          font-size: 15px;
        }
      }
    }
  }
}
</style>
